<template>
  <page-container :fullScreen="true">
    <div style="height: 100%">
      <a-spin
        tip="正在加载...."
        :spinning="spinning"
        style="position: absolute; top: 50%; left: 50%; z-index: 100"
      ></a-spin>
      <div style="height: 40px">
        <div class="headerqy">
          <div class="headerRadio">
            <a-radio-group default-value="jq" button-style="solid" @change="handleTypeqh">
              <a-radio-button value="jq" size="large">接警警情</a-radio-button>
              <a-radio-button value="fq" size="small">反馈警情</a-radio-button>
            </a-radio-group>
          </div>
          <div class="headerbox">
            <a-checkbox @change="handletraffic" style="margin-right: 10px">交通警情</a-checkbox>
            <a-checkbox @change="handleother">其他</a-checkbox>

            <a-tooltip placement="topRight" :overlayStyle="{ maxWidth: '600px' }">
              <template v-slot:title>
                <div>目前页面统计默认不包括“交通类警情”、“其他类警情”，勾选之后，将在页面展示</div>
                <div>“交通类警情”和“其他类警情”。</div>
                <div>“其他类警情”包含所有含“其他”两字的案由。</div>
              </template>
              <img src="@/assets/jg.svg" style="color: black" alt="" />
            </a-tooltip>
          </div>
        </div>
      </div>
      <div class="content">
        <!-- 查询模块 -->
        <a-card class="header">
          <a-form :wrapper-col="{ span: 17 }">
            <a-row :gutter="2" :span="24" class="search-header-label">
              <a-col :span="6">
                <a-form-item label="选择辖区" style="width: 100%">
                  <a-tree-select
                    :dropdownStyle="dropdownStyle"
                    @change="handleSelect"
                    style="min-width: 110px"
                    :tree-data="treeData"
                    v-model:value="defaultValue"
                    tree-checkable
                    placeholder="请输入"
                    treeDefaultExpandAll
                    :maxTagCount="1"
                    :replaceFields="{
                      children: 'children',
                      title: 'name',
                      key: 'code',
                      value: 'code',
                    }"
                    class="tree"
                    treeNodeFilterProp="title"
                    :show-checked-strategy="SHOW_PARENT"
                  ></a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="查询分类">
                  <a-tree-select
                    :dropdownStyle="dropdownStyle"
                    style="min-width: 110px"
                    :tree-data="classificationData"
                    @change="treeChange"
                    v-model:value="queryClass"
                    placeholder="请输入"
                    show-search
                    :replaceFields="{
                      children: 'children',
                      title: 'name',
                      key: 'code',
                      value: 'code',
                    }"
                    allow-clear
                    treeNodeFilterProp="title"
                  ></a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="选择时间">
                  <pickers :data="date" @setTime="onChange" />
                </a-form-item>
              </a-col>
              <a-col :span="6" class="Search">
                <div style="display: flex">
                  <a-button type="primary" style="border-radius: 0" @click="handleQuery">
                    搜索
                  </a-button>
                  <a-button style="margin-left: 10px" @click="handleResh">重置</a-button>

                  <!-- <a-button :loading="uploading" style="margin-left: 10px" @click="customRequest">
                    {{ uploading ? '生成中' : '辖区报告导出' }}
                  </a-button> -->
                  <router-link
                    :to="{ path: '/routine-analysis/preview' }"
                    target="_blank"
                    tag="a"
                    @click="routerClick"
                  >
                    <a-button style="margin-left: 10px">报告预览</a-button>
                  </router-link>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <!-- tas查询模块 -->
        <div class="tabsquery">
          <div class="card" @click.stop="handleSpecial(navData.all)">
            <a-card
              :title="navData.all.vname"
              :bordered="false"
              hoverable
              class="parentCard"
              :class="navData.all.vcode == activeIndex ? 'active' : ''"
            >
              <div class="flexaround" style="padding-left: 32px">
                <span class="cardjq" style="position: relative; left: -9px">警情数</span>
                &nbsp; &nbsp; &nbsp;
                <span class="jqNumber" style="width: 80px">
                  {{ navData.all.caseNum }}
                </span>
              </div>
              <div class="flexaround" style="padding-left: 24px">
                <span class="cardjq cardtb">同&emsp;比</span>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <span
                  style="
                    font-size: 12px;
                    font-weight: 600;
                    color: #fff;
                    line-height: 36px;
                    width: 80px;
                  "
                >
                  {{ navData.all.tpercent ? `${navData.all.tpercent}% ` : '-' }}
                  <img
                    src="@/assets/rise.png"
                    style="width: 10px"
                    alt=""
                    v-if="navData.all.tpercent && navData.all.tpercent > 0"
                  />
                  <img
                    src="@/assets/decline.png"
                    style="width: 10px"
                    alt=""
                    v-if="navData.all.tpercent && navData.all.tpercent < 0"
                  />
                </span>
              </div>
              <div class="flexaround" style="padding-left: 24px">
                <span class="cardjq">环&emsp;比</span>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <span
                  style="
                    font-size: 12px;
                    font-weight: 600;
                    color: #fff;
                    line-height: 20px;
                    width: 80px;
                  "
                >
                  {{ navData.all.percent ? `${navData.all.percent}% ` : '-' }}
                  <img
                    src="@/assets/rise.png"
                    style="width: 10px"
                    alt=""
                    v-if="navData.all.percent && navData.all.percent > 0"
                  />
                  <img
                    src="@/assets/decline.png"
                    style="width: 10px"
                    alt=""
                    v-if="navData.all.percent && navData.all.percent < 0"
                  />
                </span>
              </div>
              <div @click.stop>
                <querySelect
                  :data="navData.all.childTreeList"
                  @click="handleItem(navData.all)"
                  style="position: absolute; right: 5px; bottom: 5px"
                  @handleClick="handleClick"
                />
              </div>
            </a-card>
          </div>
          <rollTabs :data="navData.list" :key="tabsIndex">
            <template v-slot:content>
              <a-card
                v-for="el in navData.list"
                :key="el.vcode"
                @click.stop="handleSpecial(el)"
                :title="el.vname"
                :bordered="false"
                hoverable
                class="chidlrenCard"
                :class="el.vcode == activeIndex ? 'active' : ''"
              >
                <div class="flexaround" style="padding-left: 32px">
                  <span class="cardjq" style="position: relative; left: -9px">警情数</span>
                  &nbsp; &nbsp; &nbsp;
                  <span class="jqNumber" style="width: 80px">
                    {{ el.caseNum }}
                  </span>
                </div>
                <div class="cardtb flexaround" style="padding-left: 24px">
                  <span class="cardjq">同&emsp;比</span>
                  &nbsp; &nbsp; &nbsp; &nbsp;
                  <span class="jqNumber" style="width: 80px">
                    {{ el.yoyPercent ? `${el.yoyPercent}%` : '-' }}
                    <img
                      src="@/assets/rise.png"
                      style="width: 10px"
                      alt=""
                      v-if="el.yoyPercent && el.yoyPercent > 0"
                    />
                    <img
                      src="@/assets/decline.png"
                      style="width: 10px"
                      alt=""
                      v-if="el.yoyPercent && el.yoyPercent < 0"
                    />
                  </span>
                </div>
                <div class="flexaround" style="padding-left: 24px">
                  <span class="cardjq">环&emsp;比</span>
                  &nbsp; &nbsp; &nbsp; &nbsp;
                  <span class="jqNumber" style="width: 80px">
                    {{ el.percent ? `${el.percent}%` : '-' }}
                    <img
                      src="@/assets/rise.png"
                      style="width: 10px"
                      alt=""
                      v-if="el.percent && el.percent > 0"
                    />
                    <img
                      src="@/assets/decline.png"
                      style="width: 10px"
                      alt=""
                      v-if="el.percent && el.percent < 0"
                    />
                  </span>
                </div>
                <div @click.stop>
                  <querySelect
                    :data="el.childTreeList"
                    @click="handleItem(el)"
                    style="position: absolute; right: 5px; bottom: 5px"
                    @handleClick="handleClick"
                  />
                </div>
              </a-card>
            </template>
          </rollTabs>
        </div>
        <a-card class="navclass">
          <span v-for="(item, index) in crumbsData" :key="index" @click="handleNav(item, index)">
            <a
              href="javascript:;"
              class="echartNav"
              :style="{ cursor: `${index == crumbsData.length - 1 ? 'text' : ''}` }"
            >
              <span :class="index == crumbsData.length - 1 ? 'lastNav' : ''">
                {{ item.name }}
              </span>
              {{ index == crumbsData.length - 1 ? '' : ' / ' }}
            </a>
          </span>
        </a-card>
        <a-row :gutter="16" class="contentChart">
          <a-col :span="17" style="height: 100%">
            <div style="height: 45.5%">
              <enlarge
                style="height: 100%"
                @handleHeight="handleHeight"
                :height="height"
                :top="16"
                :right="24"
              >
                <template #content>
                  <a-card class="classification" :span="20" style="height: 100%" size="small">
                    <template #title>
                      <img
                        src="@/assets/image/statistics/jie.svg"
                        v-show="apiType == 'jq' ? true : false"
                        alt=""
                        class="iconImage"
                      />
                      <img
                        src="@/assets/image/statistics/fan.svg"
                        v-show="apiType == 'fq' ? true : false"
                        alt=""
                        class="iconImage"
                      />
                      <span class="cardname">
                        {{ `【 ${crumbsData[crumbsData.length - 1].name} 】` }}警情分类统计
                      </span>
                    </template>
                    <barEcharts
                      :option="barData"
                      :height="height"
                      @clickEchart="clickEchart"
                      style="width: 100%"
                      v-if="barData.xData.length"
                    />
                    <!-- <nodata v-else :style="{ height: `${height}vh` }" /> -->
                    <a-empty v-else style="margin-top: 5%" />
                  </a-card>
                </template>
              </enlarge>
            </div>
            <div style="height: 1%"></div>
            <div style="height: 45.5%">
              <a-row :span="20" style="height: 100%">
                <a-col :span="24">
                  <enlarge
                    @handleHeight="handletimelineHeight"
                    :height="timelineHeight"
                    :top="16"
                    :right="12"
                    style="height: 100%"
                  >
                    <template #content>
                      <a-card class="classification" style="height: 100%" size="small">
                        <template #title>
                          <img
                            src="@/assets/image/statistics/jie.svg"
                            v-show="apiType == 'jq' ? true : false"
                            alt=""
                            class="iconImage"
                          />
                          <img
                            src="@/assets/image/statistics/fan.svg"
                            v-show="apiType == 'fq' ? true : false"
                            alt=""
                            class="iconImage"
                          />
                          <div style="display: flex; align-items: center">
                            <span class="cardname">
                              {{ `【 ${crumbsData[crumbsData.length - 1].name} 】` }}警情趋势
                            </span>
                            <div
                              class="echartinfo"
                              v-if="echartInfoData[0]?.name || echartInfoData[1]?.name"
                            >
                              <span>
                                <span v-if="echartInfoData[0]?.seriesName == '当前警情'">
                                  {{ echartInfoData[0].name }} 当前警情
                                  <span style="text-decoration: underline">
                                    {{ echartInfoData[0].data }}
                                  </span>
                                </span>
                                <span v-if="echartInfoData[0]?.seriesName == '去年同期'">
                                  去年警情
                                  <span style="text-decoration: underline">
                                    {{ echartInfoData[0].data }}
                                  </span>
                                </span>
                                &nbsp;
                                <span v-if="echartInfoData[1]?.seriesName == '去年同期'">
                                  去年警情
                                  <span style="text-decoration: underline">
                                    {{ echartInfoData[1].data }}
                                  </span>
                                </span>
                                &nbsp; 同比:{{ ecahrtinfo.percent }} &nbsp; &nbsp; 环比：{{
                                  ecahrtinfo.hPercent
                                }}
                              </span>
                              <br />
                              <span
                                v-for="(item, index) in top3InfoList"
                                :key="index"
                                style="margin-right: 10px"
                              >
                                <span v-show="item.caseNum">
                                  {{ item.xqdwName }} {{ item.caseNum }}
                                  <span v-if="echartInfoData[0].data !== 0 ? true : false">
                                    ({{ divide(item.caseNum, echartInfoData[0].data) }})
                                  </span>
                                </span>
                              </span>
                            </div>
                          </div>
                        </template>
                        <timeline-chart
                          heightType="%"
                          :data="trendList.dataList"
                          height="90"
                          :type="type"
                          @Leave="handleLeave"
                          :legend="['当前警情', '去年同期']"
                          :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
                          @zrender:click="chartClickLineEl"
                          v-if="trendList && trendList.dataList"
                          @handleMove="handelEachartMove"
                        />
                        <!-- <nodata v-else style="height: 50%" /> -->
                        <a-empty v-else style="margin-top: 7%" />
                      </a-card>
                    </template>
                  </enlarge>
                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-col :span="7" style="height: 100%">
            <div :span="8" style="height: 45.5%; background: red; overflow: hidden">
              <a-card style="height: 100%; overflow: hidden" size="small" class="classification">
                <template #title>
                  <img
                    src="@/assets/image/statistics/jie.svg"
                    v-show="apiType == 'jq' ? true : false"
                    alt=""
                    class="iconImage"
                  />
                  <img
                    src="@/assets/image/statistics/fan.svg"
                    v-show="apiType == 'fq' ? true : false"
                    alt=""
                    class="iconImage"
                  />
                  <span class="cardname">
                    {{ `【 ${crumbsData[crumbsData.length - 1].name} 】` }}辖区警情统计
                  </span>
                </template>
                <pie
                  :data="pieData"
                  height="100"
                  heightType="%"
                  :fieldNames="{
                    name: 'classifyName',
                    value: 'caseNum',
                  }"
                  @zrender:click="pieRenderClickHandle"
                  v-if="pieData && pieData.length"
                />
                <a-empty v-else style="margin-top: 12%" />
              </a-card>
            </div>
            <div style="height: 1%"></div>
            <a-card style="height: 45.5%" class="father">
              <a-card size="small" class="fathercardTile cardTile" bordered>
                <template #title>
                  <img
                    src="@/assets/image/statistics/jie.svg"
                    v-show="apiType == 'jq' ? true : false"
                    alt=""
                    class="iconImage"
                  />
                  <img
                    src="@/assets/image/statistics/fan.svg"
                    v-show="apiType == 'fq' ? true : false"
                    alt=""
                    class="iconImage"
                  />
                  <span class="cardname">
                    {{ `【 ${crumbsData[crumbsData.length - 1].name} 】` }}辖区警情分类占比TOP3
                  </span>
                </template>
              </a-card>
              <div style="height: calc(100% - 48px); overflow: auto">
                <a-card :bordered="false" class="cardTile carname" style="height: 23vh">
                  <div v-if="topData.length > 0" class="car">
                    <a-card v-for="item in topData" :key="item.xqdwCode" :title="item.xqdwName">
                      <div
                        v-for="(el, index) in item.top3List"
                        :key="index"
                        style="display: flex; align-items: center; margin-bottom: 5px"
                      >
                        <div
                          style="font-size: 12px; width: 30%; text-align: right; margin-right: 10px"
                        >
                          {{ el.vname }}
                        </div>
                        <a-progress :percent="el.percent" style="width: 40%" :show-info="false" />
                        <span style="margin-left: 10px" v-show="el.caseNum ? true : false">
                          {{ el.caseNum }}
                        </span>
                        <span v-show="el.percent == '100' ? false : true">({{ el.percent }}%)</span>
                        <span v-if="el.percent == '100' ? true : false">(100%)</span>
                      </div>
                    </a-card>
                  </div>
                  <nodata v-else style="margin-left: 100%" />
                </a-card>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <police-list-drawer
          v-model:visible="tabVisible"
          :title="drawerName"
          :tabs="policeTabs"
          topicType="ct"
          :headerTile="echartInfo"
        ></police-list-drawer>
        <list
          :headerTile="echartInfo"
          v-model:visible="visible"
          :title="barName"
          :portionUrl="portionUrl"
          :params="params"
          topicType="ct"
        />
      </div>
    </div>
  </page-container>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, computed } from 'vue';
import moment from 'moment';
// import { BrokenLineItem } from '../../district-monitoring/jurisdiction-list/typing';
import TimelineChart from './components/line.vue';
import trendView from '../../district-monitoring/jurisdiction-list/js/trend-view';
import nodata from '../../intelligent-analysis/alert-list/components/nodata.vue';
import barEcharts from './components/barEcharts.vue';
import { TreeSelect, message } from 'ant-design-vue';
import list from '../components/police-list-drawer/index.vue';
import rollTabs from '@/components/rollTabs/index.vue';
import { debounce, isNil } from 'lodash-es';
import querySelect from './components/select.vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  queryXqdwList,
  queryFirstStat,
  queryStackChart,
  deaqueryVaryTrend,
  deaqueryXqdwPieChart,
  queryXqdwDealTop3,
  queryTime,
  queryXqdwCallTop3,
  queryStackChartel,
  deaqueryVaryTrendel,
  deaqueryXqdwPieChartel,
  queryFirstStatel,
  getExportXqWord,
} from '@/api/intelligentanalysis/alert';
import PoliceListDrawer from '../components/police-list-drawer/index.vue';
import Pie from '@/components/charts/pie/simple-pie/index.vue';
import enlarge from '@/components/enlarge/index.vue';
import { omit } from 'lodash';
import { useStore } from 'vuex';
import pickers from '@/components/s-picker/picker.vue';
import { navForEach, navForEachBar } from '@/views/routine-analysis/typing';
//查询条件
interface queryForm {
  callTimeStart: any;
  callTimeEnd: any;
  xqdwCodes: string; //指挥中心
  classifyCodes: string; //专题
  otherFlag: string | 'N' | 'Y'; //其他
  trafficFlag: string | 'N' | 'Y'; // 交通
  dealSummaryCodes?: string;
  callSummaryCodes?: string;
}
//导航栏数据格式
interface navType {
  all: any;
  list: any;
}
export default defineComponent({
  components: {
    TimelineChart,
    nodata,
    barEcharts,
    Pie,
    list,
    PoliceListDrawer,
    enlarge,
    rollTabs,
    querySelect,
    pickers,
  },
  setup() {
    const barName = ref<string>('');
    const tabsIndex = ref<number>(0);
    const type = ref<any>('传统');
    const apiType = ref<string>('jq');
    const checked = ref<boolean>(true);
    const height = ref<number>(88);
    const timelineHeight = ref<number>(19);
    const drawerName = ref<any>('');
    const visible = ref<any>(false);
    const params = ref<any>([]);
    const portionUrl = ref<any>('');
    const policeTabs = ref<Array<any>>([]);
    const tabVisible = ref<boolean>(false);
    const uploading = ref<boolean>(false);
    const classificationData = ref<any>([]);
    const urlFile = (window as any).g.baseURL;
    const dropdownStyle = ref<any>({
      height: '330px',
      width: '350px',
      overflow: 'auto',
    });
    const defaultValue = ref('');
    const queryClass = ref<string | undefined>(undefined);
    const handleQuery = () => {
      if (treecrumbs.value.length) {
        crumbsData.value = treecrumbs.value;
      }
      activeIndex.value = crumbsData.value[0].vcode;
      query();
    };
    let index = ref<number>(0);
    const spinning = ref<boolean>(false);
    let count = ref<number>(0);
    const activeIndex = ref<string>('');
    const trendList = ref<any>();
    trendList.value = trendView.RESULT;
    //用于判断智能 传统切换
    const flag = ref<string>('b');
    //指挥中心数据
    const treeData = ref<Array<any>>([]);
    const jurisdictionList = ref();

    const handlequeryXqdwList = () => {
      return new Promise(function (resolve, reject) {
        queryXqdwList({}).then(res => {
          if (res.code === 200 && res.data) {
            resolve(res.data); //在异步操作成功时调
          } else {
            reject(res); //在异步操作失败时调用
          }
        });
      });
    };
    const store = useStore();
    const handletRee = () => {
      store.dispatch(`dictionary/GET_TREE_PARAM`).then(() => {
        classificationData.value = computed(() => store.getters['dictionary/callTree']).value;
      });
    };
    //查询分类change事件
    const treecrumbs = ref<any>([]);
    const treeChange = (value, label, extra) => {
      treecrumbs.value = [];
      let arr = ref<any>(extra.triggerNode);
      if (arr.value.value) {
        treecrumbs.value.push({ vcode: arr.value.value, name: arr.value.title });
        if (arr.value.vcTreeNode.value) {
          treeChildren(arr.value.vcTreeNode);
        }
      }
      queryForm.dealSummaryCodes = apiType.value == 'fq' ? value : '';
      queryForm.callSummaryCodes = apiType.value == 'jq' ? value : '';
    };
    const treeChildren = value => {
      treecrumbs.value.unshift({ vcode: value.value, name: value.title });
      if (value.vcTreeNode.value) {
        treeChildren(value.vcTreeNode);
      }
    };
    //获取时间
    const handlequeryTime = () => {
      return new Promise(function (resolve, reject) {
        queryTime({ module: 'CGFX' }).then(res => {
          if (res.code === 200) {
            resolve(res.data); //在异步操作成功时调
          } else {
            reject(res); //在异步操作失败时调用
          }
        });
      });
    };
    //日期查询条件
    const date = ref<any>([]);

    //查询字段
    let queryForm: queryForm = reactive({
      callTimeStart: '',
      callTimeEnd: '',
      xqdwCodes: '',
      classifyCodes: '',
      otherFlag: 'N',
      trafficFlag: 'N',
      callSummaryCodes: '',
      dealSummaryCode: '',
    });
    //智能 导航栏数据
    // const navData = ref<Array<any>>([]);
    const navData: navType = reactive({
      all: {},
      list: [],
    });
    // 获取专题分类
    const getSubjectData = () => {
      const params = {
        ...omit(queryForm, ['classifyCodes', 'dealSummaryCodes', 'callSummaryCodes']),
      };
      if (apiType.value == 'fq') {
        queryFirstStat(params).then(res => {
          navData.all = res.data.all;
          navData.list = res.data.list;
        });
      } else {
        queryFirstStatel(params).then(res => {
          navData.all = res.data.all;
          navData.list = res.data.list;
        });
      }
    };
    const handleAdd = () => {
      if (count.value == navData.list.length - 1) {
        count.value = 0;
      }
      if (count.value < navData.list.length) {
        count.value++;
      }
    };
    const handleDel = () => {
      if (count.value > 0) {
        count.value--;
      }
    };
    //警情分类统计数据
    const barData = ref<any>({
      xData: [],
      yData: [],
      newData: [],
    });
    // 警情分类统计
    const querybarChart = () => {
      spinning.value = true;
      barData.value.yData = [];
      barData.value.xData = [];
      barData.value.newDara = [];
      let obj = ref<any>({
        name: '总数',
        type: 'bar',
        barGap: '-100%',
        barWidth: 30,
        label: {
          position: 'top',
          normal: {
            show: true, //显示数值
            position: 'top', // 在上方显示
            distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
            verticalAlign: 'middle',
            // formatter: '{c}',
            textStyle: { color: '#fff', fontSize: 12, textAline: 'center' }, //设置数值颜色
          },
        },
        itemStyle: {
          normal: {
            color: 'rgba(128, 128, 128, 0)', // 设置背景颜色为透明
          },
        },
        data: [],
      });

      obj.value.data = [];
      spinning.value = true;
      if (apiType.value == 'fq') {
        queryStackChart(queryForm)
          .then(res => {
            if (res.data.xList) {
              res.data.xList.forEach(item => {
                obj.value.data.push(item.caseNum);
                item.data = [];
                item.childCode = [];
                barData.value.xData.push(item.name);
                res.data.yList.forEach(el => {
                  if (el.code == item.code) {
                    el.name = el.childName;
                    el.parentName = item.parentName;
                    el.percent = item.percent;
                    el.caseNum = item.caseNum;
                    item.childCode.push(el.childCode);
                    el.code = item.code;
                    barData.value.yData.push(el);
                  }
                });
              });
              barData.value.newDara = res.data.xList;
              barData.value.yData = barData.value.yData.map(item => ({
                stack: 'value',
                type: 'bar',
                name: item.name,
                data: item.valueList,
                parentName: item.parentName,
                percent: item.percent,
                caseNum: item.caseNum,
                code: item.code,
                childCode: item.childCode,
                barWidth: '30',
              }));
              barData.value.yData.push(obj.value);
              if (crumbsData.value[crumbsData.value.length - 1].name == '全部') {
                jurisdictionList.value = navForEach(navData.list.slice(0, 5));
              } else {
                jurisdictionList.value = navForEachBar(barData.value.newDara.slice(0, 6));
              }
            }
          })
          .finally(() => {
            spinning.value = false;
          });
      } else {
        queryStackChartel(queryForm)
          .then(res => {
            if (res.data.xList) {
              res.data.xList.forEach(item => {
                obj.value.data.push(item.caseNum);
                item.data = [];
                item.childCode = [];
                barData.value.xData.push(item.name);
                res.data.yList.forEach(el => {
                  if (el.code == item.code) {
                    el.name = el.childName;
                    el.parentName = item.parentName;
                    el.percent = item.percent;
                    el.caseNum = item.caseNum;
                    item.childCode.push(el.childCode);
                    el.code = item.code;
                    barData.value.yData.push(el);
                  }
                });
              });
              barData.value.newDara = res.data.xList;
              barData.value.yData = barData.value.yData.map(item => ({
                stack: 'value',
                type: 'bar',
                name: item.name,
                data: item.valueList,
                parentName: item.parentName,
                percent: item.percent,
                caseNum: item.caseNum,
                topList: item.topList,
                code: item.code,
                childCode: item.childCode,
                barWidth: '30',
              }));
              barData.value.yData.push(obj.value);
              if (crumbsData.value[crumbsData.value.length - 1].name == '全部') {
                jurisdictionList.value = navForEach(navData.list.slice(0, 5));
              } else {
                jurisdictionList.value = navForEachBar(barData.value.newDara.slice(0, 6));
              }
            }
          })
          .finally(() => {
            spinning.value = false;
          });
      }

      handlequeryVaryTrend();
      pieChart();
    };
    const crumbsData = ref<any>([{ name: '全部', vcode: '' }]);
    const clickEchart = debounce(function (value) {
      /***
       * 判断柱状图是否存在下级  不存在弹出list
       */
      if (barData.value?.newDara[value].childCode.length > 1) {
        crumbsData.value.push({
          name: barData.value.newDara[value].name,
          vcode: crumbsData.value.length == '0' ? '' : barData.value.newDara[value].code,
        });
        queryForm.dealSummaryCodes = apiType.value == 'fq' ? barData.value.newDara[value].code : '';
        queryForm.callSummaryCodes = apiType.value == 'jq' ? barData.value.newDara[value].code : '';
        querybarChart();
        handlequeryVaryTrend();
        queryXqdwClassify();
        pieChart();
      } else {
        barName.value = barData.value.newDara[value].name;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          dealSummaryCode: apiType.value == 'fq' ? barData.value.newDara[value].code : '',
          callSummaryCode: apiType.value == 'jq' ? barData.value.newDara[value].code : '',
          callTimeStart: queryForm.callTimeStart,
          callTimeEnd: queryForm.callTimeEnd,
          xqdwCodes: queryForm.xqdwCodes,
          page: 1,
          searchType: apiType.value == 'fq' ? '1' : '2',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          size: 10,
        };
        //弹框头部查询条件信息
        echartInfo.value = {
          type: apiType.value === 'fq' ? '反馈警情' : '接警警情',
          time: date.value[0] + ' 至 ' + date.value[1],
          name: crumbsData.value[crumbsData.value.length - 1].name,
        };
        visible.value = true;
      }
    }, 1000);
    //echart 回退
    const handleNav = (value, index) => {
      if (index == crumbsData.value.length - 1) {
        return;
      }
      queryForm.dealSummaryCodes = apiType.value == 'fq' ? value.vcode : '';
      queryForm.callSummaryCodes = apiType.value == 'jq' ? value.vcode : '';
      querybarChart();
      handlequeryVaryTrend();
      queryXqdwClassify();
      crumbsData.value = crumbsData.value.slice(0, index + 1);
    };
    //警情趋势预警数据
    //警情趋势预警数据查询
    const handlequeryVaryTrend = () => {
      if (apiType.value == 'fq') {
        deaqueryVaryTrend(queryForm).then(res => {
          trendList.value = res.data;
        });
      } else {
        deaqueryVaryTrendel(queryForm).then(res => {
          trendList.value = res.data;
        });
      }
    };
    // top3
    const topData = ref<Array<any>>([]);
    const queryXqdwClassify = () => {
      if (apiType.value == 'fq') {
        queryXqdwDealTop3(queryForm).then(res => {
          topData.value = res.data;
        });
      } else {
        queryXqdwCallTop3(queryForm).then(res => {
          topData.value = res.data;
        });
      }
    };
    //点击辖区单位
    const pieRenderClickHandle = (e: any) => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        visible.value = true;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          dealSummaryCodes: apiType.value == 'fq' ? queryForm.dealSummaryCodes : '',
          callSummaryCodes: apiType.value == 'jq' ? queryForm.callSummaryCodes : '',
          xqdwCode: pieData.value[dataIndex].code,
          callTimeStart: queryForm.callTimeStart,
          callTimeEnd: queryForm.callTimeEnd,
          page: 1,
          searchType: apiType.value == 'fq' ? '1' : '2',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          size: 10,
        };
        echartInfo.value = {
          type: apiType.value === 'fq' ? '反馈警情' : '接警警情',
          time: date.value[0] + ' 至 ' + date.value[1],
          name: crumbsData.value[crumbsData.value.length - 1].name,
        };
      }
    };
    //日期
    const onChange = value => {
      date.value = value;
      queryForm.callTimeStart = value[0];
      queryForm.callTimeEnd = value[1];
    };
    const query = () => {
      getSubjectData();
      querybarChart();
      handlequeryVaryTrend();
      queryXqdwClassify();
      pieChart();
      //刷新组件
      tabsIndex.value++;
    };
    //其他
    const handleother = e => {
      if (e.target.checked) {
        queryForm.otherFlag = 'Y';
      } else {
        queryForm.otherFlag = 'N';
      }
      activeIndex.value = '';
      queryForm.callSummaryCodes = '';
      queryForm.dealSummaryCodes = '';
      date.value = originalDate.value;
      queryForm.callTimeStart = originalDate.value[0];
      queryForm.callTimeEnd = originalDate.value[1];
      queryForm.xqdwCodes = '';
      tabsIndex.value++;
      getSubjectData();
      handlePublic();
    };
    //交通
    const handletraffic = e => {
      if (e.target.checked) {
        queryForm.trafficFlag = 'Y';
      } else {
        queryForm.trafficFlag = 'N';
      }
      tabsIndex.value++;
      activeIndex.value = '';
      queryForm.callSummaryCodes = '';
      queryForm.dealSummaryCodes = '';
      date.value = originalDate.value;
      queryForm.callTimeStart = originalDate.value[0];
      queryForm.callTimeEnd = originalDate.value[1];
      queryForm.xqdwCodes = '';
      getSubjectData();
      handlePublic();
    };
    //点击专题搜索弹框
    const onCascader = (value, option) => {
      queryForm.classifyCodes = '';
      queryForm.dealSummaryCodes = apiType.value == 'fq' ? value[value.length - 1] : '';
      queryForm.callSummaryCodes = apiType.value == 'jq' ? value[value.length - 1] : '';
      activeIndex.value = number.value;
      crumbsData.value = optionValue.value;
      let newArr = option.map(item => ({
        name: item.name,
        vcode: item.code,
      }));
      crumbsData.value = crumbsData.value.concat(newArr);
      handlePublic();
    };
    //点击select
    const handleClick = (value, option) => {
      queryForm.classifyCodes = '';
      queryForm.dealSummaryCodes = apiType.value == 'fq' ? value : '';
      queryForm.callSummaryCodes = apiType.value == 'jq' ? value : '';
      activeIndex.value = number.value;
      crumbsData.value = optionValue.value;
      crumbsData.value = crumbsData.value.concat(option);
      queryClass.value = value;
      handlePublic();
    };
    let number = ref<any>('');
    const optionValue = ref<Array<any>>([]);
    const handleItem = value => {
      optionValue.value = [{ name: value.vname, vcode: value.vcode }];
      number.value = value.vcode;
    };
    //点击专题
    const handleSpecial = value => {
      crumbsData.value = [{ name: value.vname, vcode: value.vcode }];
      queryForm.classifyCodes = '';
      if (apiType.value == 'fq') {
        queryForm.dealSummaryCodes = value.vcode;
        queryForm.callSummaryCodes = '';
      } else {
        queryForm.dealSummaryCodes = '';
        queryForm.callSummaryCodes = value.vcode;
      }
      activeIndex.value = value.vcode;
      handlePublic();
    };
    //点击指挥中心
    const handleSelect = value => {
      queryForm.xqdwCodes = value.toString();
    };
    //辖区警情统计
    let pieData = ref<any>([]);
    const pieChart = () => {
      if (apiType.value == 'fq') {
        deaqueryXqdwPieChart(queryForm).then(res => {
          res.data.forEach(item => {
            item.value = item.caseNum;
          });
          pieData.value = res.data;
        });
      } else {
        deaqueryXqdwPieChartel(queryForm).then(res => {
          res.data.forEach(item => {
            item.value = item.caseNum;
          });
          // res.data.push({});
          pieData.value = res.data;
        });
      }
    };
    const lineParams = [
      {
        name: '当期警情',
        url: '/aitype/caseInfo/queryCaseInfo',
        params: reactive({
          dealSummaryCodes: apiType.value == 'fq' ? queryForm.dealSummaryCodes : '',
          callSummaryCodes: apiType.value == 'jq' ? queryForm.dealSummaryCodes : '',
          callTimeStart: '',
          callTimeEnd: '',
          page: 1,
          searchType: '1',
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          xqdwCodes: queryForm.xqdwCodes,
          size: 10,
        }),
      },
      {
        name: '去年同期',
        url: '/aitype/caseInfo/queryCaseInfo',
        params: reactive({
          dealSummaryCodes: apiType.value == 'fq' ? queryForm.dealSummaryCodes : '',
          callSummaryCodes: apiType.value == 'jq' ? queryForm.dealSummaryCodes : '',
          callTimeStart: '2020-07-19 02:08:03',
          callTimeEnd: '2021-07-18 23:59:59',
          page: 1,
          size: 10,
          searchType: 1,
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          xqdwCodes: queryForm.xqdwCodes,
        }),
      },
    ];
    const echartInfo = ref<any>({});
    //趋势图点击
    const chartClickLineEl = (index, item) => {
      tabVisible.value = true;
      drawerName.value = '警情趋势';
      lineParams[0].params.callTimeStart = `${item.dataDate} 00:00:00`;
      lineParams[0].params.callTimeEnd = `${item.dataDate} 23:59:59`;
      lineParams[0].params.xqdwCodes = queryForm.xqdwCodes;
      lineParams[1].params.xqdwCodes = queryForm.xqdwCodes;
      lineParams[0].params.trafficFlag = queryForm.trafficFlag;
      lineParams[0].params.otherFlag = queryForm.otherFlag;
      lineParams[1].params.trafficFlag = queryForm.trafficFlag;
      lineParams[1].params.otherFlag = queryForm.otherFlag;
      lineParams[0].params.searchType = apiType.value == 'fq' ? '1' : '2';
      lineParams[1].params.searchType = apiType.value == 'fq' ? '1' : '2';
      lineParams[0].params.dealSummaryCodes =
        apiType.value == 'fq' ? queryForm.dealSummaryCodes : '';
      lineParams[0].params.callSummaryCodes =
        apiType.value == 'jq' ? queryForm.callSummaryCodes : '';
      lineParams[1].params.callTimeStart = `${moment(item.dataDate)
        .subtract(1, 'years')
        .format('YYYY-MM-DD')} 00:00:00`;
      lineParams[1].params.callTimeEnd = `${moment(item.dataDate)
        .subtract(1, 'years')
        .format('YYYY-MM-DD')} 23:59:59`;
      lineParams[1].params.dealSummaryCodes =
        apiType.value == 'fq' ? queryForm.dealSummaryCodes : '';
      lineParams[1].params.callSummaryCodes =
        apiType.value == 'jq' ? queryForm.callSummaryCodes : '';
      policeTabs.value = lineParams;
      //弹框头部查询条件信息
      echartInfo.value = {
        time: echartInfoData.value[0].name,
        type: apiType.value === 'fq' ? '反馈警情' : '接警警情',
        name: crumbsData.value[crumbsData.value.length - 1].name,
      };
    };
    //请求接口
    const handlePublic = () => {
      querybarChart();
      handlequeryVaryTrend();
      queryXqdwClassify();
      pieChart();
    };

    const handleHeight = value => {
      height.value = value;
    };
    const handletimelineHeight = value => {
      timelineHeight.value = value;
    };
    //重置
    const handleResh = () => {
      location.reload();
    };
    //接警 反馈切换
    const handleTypeqh = e => {
      crumbsData.value = [{ name: '全部', vcode: '' }];
      apiType.value = e.target.value;
      if (apiType.value === 'fq') {
        store.dispatch(`dictionary/GET_TREE_PARAM`).then(() => {
          classificationData.value = computed(() => store.getters['dictionary/dealTree']).value;
        });
      } else {
        store.dispatch(`dictionary/GET_TREE_PARAM`).then(() => {
          classificationData.value = computed(() => store.getters['dictionary/callTree']).value;
        });
      }
      activeIndex.value = '';
      queryForm.callSummaryCodes = '';
      queryForm.dealSummaryCodes = '';
      queryClass.value = undefined;
      defaultValue.value = treeData.value[0]?.code || '';
      queryForm.xqdwCodes = defaultValue.value;
      getSubjectData();
      handlePublic();
      tabsIndex.value++;
    };

    const customRequest = () => {
      if (!queryForm.xqdwCodes || !queryForm.callTimeStart || !queryForm.callTimeEnd) {
        return message.warning('请填写辖区与日期范围！');
      }
      uploading.value = true;
      let obj = ref({});
      if (apiType.value == 'fq') {
        obj.value = {
          xqdwCode: queryForm.xqdwCodes,
          minDate: queryForm.callTimeStart,
          maxDate: queryForm.callTimeEnd,
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          dealSummaryCode: queryForm.dealSummaryCodes,
        };
      } else if (apiType.value == 'jq') {
        obj.value = {
          xqdwCode: queryForm.xqdwCodes,
          minDate: queryForm.callTimeStart,
          maxDate: queryForm.callTimeEnd,
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
          callSummaryCode: queryForm.callSummaryCodes,
        };
      } else {
        obj.value = {
          xqdwCode: queryForm.xqdwCodes,
          minDate: queryForm.callTimeStart,
          maxDate: queryForm.callTimeEnd,
          otherFlag: queryForm.otherFlag,
          trafficFlag: queryForm.trafficFlag,
        };
      }
      getExportXqWord(obj.value)
        .then(res => {
          const resCode = ref<any>(res);
          if (resCode.value.code == 200) {
            window.location.href =
              urlFile + '/report/download' + '?id=' + resCode.value.data.fileName;
            message.success('报告导出成功！');
          } else {
            message.error('报告导出失败！');
          }
          uploading.value = false;
        })
        .catch(() => {
          uploading.value = false;
          message.error('报告导出失败！');
        });
    };
    const top3InfoList = ref<any>({});
    //echart鼠标移动
    let echartInfoData = ref<any>([]);
    let ecahrtinfo = ref<any>({});
    const handelEachartMove = value => {
      echartInfoData.value = value;
      let index = value[0].dataIndex;
      top3InfoList.value = trendList.value.dataList[index].top3List || [];
      ecahrtinfo.value = trendList.value.dataList[index];
    };
    //鼠标离开
    const handleLeave = value => {
      if (value) {
        echartInfoData.value = [];
      }
    };
    const originalDate = ref<Array<string>>([]);
    const flTopsList = ref<any>({});

    const divide = (num1, num2) => {
      let t1, t2, r1, r2;
      try {
        t1 = num1.toString().split('.')[1].length;
      } catch (e) {
        t1 = 0;
      }
      try {
        t2 = num2.toString().split('.')[1].length;
      } catch (e) {
        t2 = 0;
      }
      r1 = Number(num1.toString().replace('.', ''));
      r2 = Number(num2.toString().replace('.', ''));
      let number = (r1 / r2) * Math.pow(10, t2 - t1) * 100;
      return number.toFixed(2) + '%';
    };

    //预览缓存
    const routerClick = () => {
      const queryForms = {
        queryForm: queryForm,
        crumbsData: crumbsData.value[crumbsData.value.length - 1].name,
        jurisdiction: jurisdictionList.value,
        apiType: apiType.value,
      };
      localStorage.setItem('queryForm', JSON.stringify(queryForms)); //存储
    };

    onMounted(() => {
      Promise.all([handlequeryTime(), handlequeryXqdwList()])
        .then(([reslut1, reslut2]: Array<any>) => {
          treeData.value = reslut2 || [];
          defaultValue.value = treeData.value[0]?.code || '';
          queryForm.xqdwCodes = defaultValue.value;
          queryForm.callTimeStart = reslut1.callTimeStart;
          queryForm.callTimeEnd = reslut1.callTimeEnd;
          date.value[0] = reslut1.callTimeStart;
          date.value[1] = reslut1.callTimeEnd;
          originalDate.value = date.value;
          if (reslut1.callTimeStart) {
            getSubjectData();
            querybarChart();
            handlequeryVaryTrend();
            queryXqdwClassify();
            pieChart();
          }
        })
        .catch(err => {
          console.log('err', err);
        });
      handletRee();
    });
    return {
      barName,
      flTopsList,
      top3InfoList,
      ecahrtinfo,
      queryClass,
      originalDate,
      treecrumbs,
      handleLeave,
      echartInfoData,
      handelEachartMove,
      handletRee,
      handleTypeqh,
      classificationData,
      checked,
      handleResh,
      type,
      height,
      handletimelineHeight,
      handleHeight,
      timelineHeight,
      number,
      params,
      portionUrl,
      tabVisible,
      visible,
      pieRenderClickHandle,
      drawerName,
      policeTabs,
      chartClickLineEl,
      handleQuery,
      clickEchart,
      dropdownStyle,
      spinning,
      activeIndex,
      handlequeryVaryTrend,
      onChange,
      onCascader,
      handleItem,
      pieData,
      handleother,
      getSubjectData,
      SHOW_PARENT,
      moment,
      queryForm,
      navData,
      querybarChart,
      barData,
      date,
      treeData,
      handlequeryXqdwList,
      handleSelect,
      flag,
      trendList,
      queryXqdwClassify,
      handleAdd,
      count,
      handleDel,
      topData,
      handleSpecial,
      handlePublic,
      handletraffic,
      pieChart,
      index,
      crumbsData,
      handleNav,
      apiType,
      customRequest,
      uploading,
      defaultValue,
      tabsIndex,
      handleClick,
      treeChange,
      query,
      divide,
      echartInfo,
      routerClick,
    };
  },
});
</script>
<style lang="less" scoped>
.headerbox {
  color: #b9c4dd;
  img {
    width: 20px;
    height: 20px;
  }
  :deep(.ant-checkbox-inner) {
    border-color: #ffffff;
    border-radius: 0;
  }
}
.headerqy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.content {
  width: 100%;
  height: 94%;
  .header {
    display: flex;
    align-items: center;
    // height: 7%;
    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
    :deep(.ant-card-body) {
      width: 100%;
    }
    :deep(.ant-checkbox-checked .ant-checkbox-inner) {
      background-color: none;
    }
    .headerQuery {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .headerQuery-xiaq {
        display: flex;
        align-items: center;
      }
    }
  }
  .navclass {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .tabsquery {
    display: flex;
    height: 15%;
    max-height: 145px !important;
    :deep(.card .ant-card-head) {
      min-height: 33px;
      padding: 0;
      color: #ffffff;
      font-weight: 400;
      font-size: 14px;
      font-family: Source Han Sans CN;
      text-align: center;
      background: #194295;
      border-radius: 0;
    }
    :deep(.card .ant-card-body) {
      padding: 12px;
    }
    .parentCard {
      position: relative;
      min-width: 203px;
      height: 135px;
      margin: 10px 0;
      font-size: 13px;
    }
    .cardjq {
      display: inline-block;
      //   margin-right: 10px;
      color: #88a7d7;
      font-weight: 400;
      font-size: 14px;
      text-align: right;
    }
    .jqNumber {
      //   width: 93px;
      color: #fff;
      font-weight: 600;
      font-size: 12px;
      line-height: 22px;
    }
    .cardtb {
      margin: 7px 0;
    }
    .chidlrenCard {
      float: left;
      min-width: 203px;
      height: 135px;
      margin: 0 5px;
      font-size: 13px;
    }
  }
  .contentChart {
    height: 80%;
    :deep(.ant-card-body) {
      height: 100%;
    }
    .iconImage {
      position: absolute;
      top: -2px;
      left: -2px;
      width: 35px;
      height: 35px;
    }
    :deep(.classification .ant-card-head) {
      height: 48px;
      padding-top: 5px;
      font-size: 14px;
      background: #34363c;
      border-bottom: 0.8px solid rgba(76, 84, 107, 0.75);
      border-radius: 0;
    }
    :deep(.classification .ant-card-body) {
      height: 90%;
      overflow: hidden;
    }
  }
}
.echartinfo {
  display: inline-block;
  display: table;
  width: 470px;
  margin: 0 auto;
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
  font-family: Source Han Sans CN;
  text-align: left;
}
.cardname {
  margin-left: 20px;
  color: #ffffff;
  font-weight: 500;
  font-size: 16px;
  font-family: Source Han Sans CN;
}
.flexaround {
  display: flex;
  justify-content: space-around;
  justify-content: center;
}
:deep(.ant-card-head-title) {
  font-weight: 400;
  font-size: 14px;
}

:deep(.carname .ant-card-head-title) {
  padding: 0;
  text-align: center;
}
:deep(.carname .ant-card-head) {
  min-height: 20px;
}

:deep(.ant-card-head-wrapper) {
  height: 33px;
}

:deep(.cardTile .ant-card-body) {
  padding: 0;
}
:deep(.fathercardTile .ant-card-head) {
  display: flex;
  align-items: center;
  height: 48px;
  background: #34363c;
  border-radius: 0;
}

:deep(.father .ant-card-body) {
  height: 10px;
  padding: 0;
}
:deep(.ant-card-body) {
  padding: 10px;
}
:deep(.ant-card-head) {
  border-bottom: none;
}
.active {
  border: 1px solid #347ee2;
}

.Search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
:deep(.ant-tabs-nav-wrap) {
  display: none;
}
:deep(.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane, .ant-tabs
    .ant-tabs-bottom-content
    > .ant-tabs-tabpane) {
  display: flex;
}
:deep(.ant-tabs-bar) {
  margin: 0;
}
// :deep(.ant-select-dropdown .ant-select-tree-dropdown) {
// background: red;
// }
:deep(.ant-select-selection--multiple) {
  display: inline-flex;
  white-space: nowrap;
}
:deep(.ant-radio-button-wrapper) {
  border-radius: 20px 0 0 20px;
}
:deep(.ant-progress-text .anticon) {
  display: none;
}
:deep(.ant-tabs-bar) {
  display: none;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
  background-color: #000;
}
:deep(.ant-checkbox-checked::after) {
  border: 1px solid;
}

.echartNav {
  color: rgba(255, 255, 255, 0.45);
}
.lastNav {
  color: #b5b6b8;
  cursor: text;
  pointer-events: none;
}
@media screen and (max-width: 2000px) {
  .contentChart {
    height: 800px !important;
  }
  .top3 {
    height: 96%;
  }
}
@media screen and (max-width: 1700px) {
  .search-header-label {
    height: 90px !important;
  }
  .Search {
    margin-top: 49px;
  }
}
@media screen and (max-width: 1238px) {
  .search-header-label {
    height: 100% !important;
  }
  .Search {
    display: flex;
    margin-top: 87px;
  }
}
</style>
